<template>
  <div class="domestic">
    <div class="return_place">
      <p>
        <span>取还车城市</span>
        <van-cell @click="showPopup_1">
          <span>
            <span>{{ place_1 }}</span>
            <i :class="[sort_1 ? 'fa fa-sort-up' : 'fa fa-sort-down']"></i>
          </span>
        </van-cell>
      </p>
      <p>
        <span>取还车地点</span>
        <van-cell @click="showPopup_2">
          <span>{{ place_2
            }}<i :class="[sort_2 ? 'fa fa-sort-up' : 'fa fa-sort-down']"></i>
          </span>
        </van-cell>
      </p>
      <!-- <p>
        <span>异地还车</span>
        <van-switch v-model="checked" />
      </p> -->
    </div>

    <!-- 还车时间 -->
    <div class="return_time">
      <div class="top">
        <span>{{ start_1 }}</span>
        <span>{{ end_1 }}</span>
      </div>
      <div class="bottom">
        <van-cell @click="show = true">
          <!-- <span>11月20日 19:30 </span> -->
          <span>{{ start }} </span>
          <span><img src="../../assets/images/toggle.png" alt="#" /></span>
          <span>{{ end }} </span>
        </van-cell>
        <van-calendar v-model="show" type="range" @confirm="onConfirm" />
      </div>
    </div>

    <!-- <div class="return_auto">
      <span>
        <input type="radio" @click="auto_" :checked="check" />
      </span>
      <span>送货上门</span>
    </div> -->

    <div class="return_go">
      <button @click="go_">我要租车 </button>
    </div>

    <van-popup v-model="show_1" position="bottom" :style="{ height: '25%', transform: 'scaleY(1.5)' }">
      <van-area title="请选择地址" :area-list="areaList" :columns-num="3" @confirm="confirm_1" @cancel='cancel1' item-height=".35rem" />
    </van-popup>
    <van-popup v-model="show_2" position="bottom" :style="{ height: '25%', transform: 'scaleY(1.5) ' }">
      <van-area :title="place_2" :area-list="shopList" :columns-num="1" @confirm="confirm_2" @cancel='cancel2' item-height=".35rem" />
    </van-popup>
  </div>
</template>

<script>
import areaList from "../../assets/js/areaList.js";
import { adress } from "../../request/home/adress";
export default {
  props: {},
  mounted() {
    this.$store.state.order.orderno='';
    this.getshop();

  },
  data() {
    return {
      sort_1: false,
      sort_2: false,
      title: "选择日期区间",
      show: false,
      areaList: areaList,
      shopList: {},
      show_1: false,
      show_2: false,
      place_1: "中原区",
      place_2: "请选择",
      checked: true,
      start: "请输入开始时间",
      end: "请输入结束时间",
      check: false,
      start_1: "今天",
      end_1: "今天",
      areaId: "",
      data:[]
    };
  },
  methods: {
    // 获取门店z
    getshop() {
      this.$http.get("/choose/api/selectAreaController/selectArea?areaId=" + this.areaId).then(res => {
        let province_list = {};
        res.data.data.forEach((item) => {
          province_list[item.id] = item.sname;
        });
        this.shopList = {province_list};
      })
    },
    // adress({
    //   "areaId": this.areaId
    // }).then((res) => {
    //   if (res == null || res.length == 0) {
    //     this.place_2 = "此区域没有门店"
    //     return false;
    //   }
    //   this.place_2 = "请选择门店"
    //   let province_list = {};
    //   res.data.forEach((item) => {
    //
    //     province_list[item.id + "!@#" + item.address] = item.name;
    //   });
    //   this.shopList = { province_list };
    // });
    //    },

    // 时间过滤
    formatDate(date) {
      // if (date.getMinutes() < 10) {
      //   date.getMinutes() = "0" + date.getMinutes();
      // } else {
      //   continue;
      // }
      let now_ = new Date();
      let time_ = `${now_.getFullYear()}:${now_.getMonth()}:${now_.getDay()}`;
      return [
        `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, 0)}-${date.getDate().toString().padStart(2, 0)}`,
        // `${date.getMonth() + 1}月${date.getDay()}`,
      ];
    },
    onConfirm(date) {
      const [start, end] = date;
      this.show = false;
      this.start = this.formatDate(start)[0];
      this.end = this.formatDate(end)[0];
      this.start_1 = this.formatDate(start)[1];
      this.end_1 = this.formatDate(end)[1];
      this.$store.state.startime = this.start;
      this.$store.state.endtime = this.end;
      this.$store.state.startime_ = start;
      this.$store.state.endtime_ = end;
      if (this.start_1 == new Date().getDay()) {
        this.start_1 = "今天";
      } else if (this.start_1 === "0") {
        this.start_1 = "星期日";
      } else if (this.start_1 === "1") {
        this.start_1 = "星期一";
      } else if (this.start_1 === "2") {
        this.start_1 = "星期二";
      } else if (this.start_1 === "3") {
        this.start_1 = "星期三";
      } else if (this.start_1 === "4") {
        this.start_1 = "星期四";
      } else if (this.start_1 === "5") {
        this.start_1 = "星期五";
      } else if (this.start_1 === "6") {
        this.start_1 = "星期六";
      }
      if (this.end_1 == new Date().getDay()) {
        this.end_1 = "今天";
      } else if (this.end_1 === "0") {
        this.end_1 = "星期日";
      } else if (this.end_1 === "1") {
        this.end_1 = "星期一";
      } else if (this.end_1 === "2") {
        this.end_1 = "星期二";
      } else if (this.end_1 === "3") {
        this.end_1 = "星期三";
      } else if (this.end_1 === "4") {
        this.end_1 = "星期四";
      } else if (this.end_1 === "5") {
        this.end_1 = "星期五";
      } else if (this.end_1 === "6") {
        this.end_1 = "星期六";
      }
    },
    cancel2() { this.show_2 = false },
    cancel1() { this.show_1 = false },
    /* 选择区域 */
    confirm_1(m) {
      this.place_1 = m[2].name;
      this.sort_1 = false;
      this.show_1 = false;
      this.$store.state.address.province = m[0].name;
      this.$store.state.address.city = m[1].name;
      this.$store.state.address.area = m[2].name;
      if (this.place_1 === this.place_2) {
        this.checked = false;
      } else {
        this.checked = true;
      }
      this.shopList = {}
      this.areaId = m[2].code;
      this.getshop()
    },

    /* 选择门店 */
    confirm_2(n) {
      this.$store.state.brrowShop = (n[0].code).split('!@#')[0]
      this.$store.state.address.address = (n[0].code).split("!@#")[1]
      this.place_2 = n[0].name;
      this.$store.state.shopname = n[0].name
      this.sort_2 = false;
      this.show_2 = false;
      if (this.place_1 === this.place_2) {
        this.checked = false;
      } else {
        this.checked = true;
      }

    },
    showPopup_1() {
      // this.sort_1 = true;
      this.show_1 = true;
    },
    showPopup_2() {
      // this.sort_2 = true;
      this.show_2 = true;
    },
    auto_() {
      this.check = !this.check;
    },

    go_() {
      if (this.$store.state.brrowShop != "" && this.$store.state.startime != "") {

        this.$router.push("/tiaoxuanchexing");

      } else {
        alert("请输入门店和开始时间与结束时间")
      }
    },
  },
  components: {},
};
</script>

<style scoped lang="less">
.domestic {
  padding: 0.15rem 0.5rem 0 0.55rem;
  .return_place {
    display: flex;
    font-size: 0.23rem;
    color: #999999;
    p {
      display: flex;
      flex-direction: column;
      padding-left: 0.23rem;
      border-bottom: 1px solid #eeeeee;
      & span:last-of-type {
        // height: 0.9rem;
        display: flex;
        align-items: center;
        font-weight: 900;
        i {
          margin-bottom: 0.18rem;
          margin-left: 0.18rem;
          font-size: 0.36rem;
          color: #999999;
        }
      }
    }
    p:first-of-type {
      width: 1.96rem;
      & > div {
        padding: 0;
        font-size: 0.3rem;
        color: #333333;
      }
    }
    p:nth-of-type(2) {
      width: 2.8rem;
      & > div {
        padding: 0;
        font-size: 0.26rem;
        color: #333333;
      }
    }
    p:last-of-type {
      & > div {
        margin-left: 0.3rem;
        margin-top: 0.1rem;
      }
    }
  }
  .return_time {
    color: #333333;
    font-weight: 900;
    border-bottom: 1px solid #eeeeee;
    .top {
      padding-left: 0.23rem;
      height: 0.55rem;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      font-size: 0.23rem;
    }
    .bottom {
      & > div {
        padding: 0;
        padding-left: 0.23rem;
        & > div {
          display: flex;
          height: 0.64rem;
          // justify-content: space-between;
          align-items: center;
          font-size: 0.36rem;
          span:nth-of-type(1) {
            flex: 1;
          }
          span:nth-of-type(2) {
            height: 100%;
            display: flex;
            align-items: center;
            img {
              margin-left: 0.15rem;
              margin-right: 0.15rem;
              margin-bottom: 0.08rem;
              width: 0.6rem;
            }
          }
          span:nth-of-type(3) {
            flex: 1;
          }
        }
      }
    }
  }
  .return_auto {
    height: 0.86rem;
    display: flex;
    align-items: center;
    padding-left: 0.23rem;
    border-bottom: 1px solid #eeeeee;
    & > span:first-of-type {
      height: 100%;
      display: flex;
      align-items: center;
      input {
        width: 0.26rem;
        height: 0.26rem;
        border: 3px solid #999999;
        border-radius: 50%;
      }
    }
    & > span:last-of-type {
      // margin-top: -10px;
      margin-left: 0.2rem;
      font-size: 0.22rem;
      color: #999999;
      display: inline-block;
    }
  }
  .return_go {
    padding: 0.52rem 0 0.4rem 0;
    text-align: center;
    button {
      padding: 0.3rem 2.2rem;
      font-size: 0.34rem;
      border: 0;
      color: #ffffff;
      background-color: #27aafc;
      border-radius: 0.14rem;
    }
  }
}
</style>
